<template>
  <el-upload :before-upload="beforeUpload" :http-request="createUpload" 
  action=""
  class="upload-demo"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  list-type="picture">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</template>
<script>
// 获取七牛token 后端通过Access Key,Secret Key,bucket等生成token
// 七牛官方sdk https://developer.qiniu.com/sdk#official-sdk
import{fileUploadUrl}from "@/utils/common"

export default {
  props:{
    fileList:{
       type: Array ,
       default:null
    }
  },
  watch:{
    // fileListPre:function(n,o){
    //   console.log(o)
    //     let _self=this
    //   if(_self.fileList.length<=0&&n.length>0){
    //     n.forEach((value,index)=>{
    //       console.log(index)
    //       _self.fileList.push({name:value,url:value})
    //     });
    //   }
    //   if(!n){
    //      _self.fileList=[];
    //   }
    // }
  },
  data() {
    return {
    }
  },
  created(){

  },
  mounted() {
    console.log(this.fileList)
  },
  methods: {
    beforeUpload() {
      // let _this = this
      //   const is1M = file.size / 1024 / 1024 < 1; // 限制小于1M
      //   const isSize = new Promise(function (resolve, reject) {
      //     let width = 654; // 限制图片尺寸为654X270
      //     let height = 270;
      //     let _URL = window.URL || window.webkitURL;
      //     let img = new Image();
      //     img.onload = function () {
      //       let valid = img.width === width && img.height === height;
      //       valid ? resolve() : reject();
      //     }
      //     img.src = _URL.createObjectURL(file);
      //   }).then(() => {
      //     return file;
      //   }, () => {
      //     _this.$message.error('图片尺寸限制为654 x 270，大小不可超过1MB')
      //     return Promise.reject();
      //   });
      //   if (!is1M) {
      //     _this.$message.error('图片尺寸限制为654 x 270，大小不可超过1MB')
      //   }
      //   return isSize&is1M
    },
    createUpload(param){ //上传图片
     let formData = new FormData();
      formData.append("file", param.file); // 'file' 可变 相当于 input 表单的name 属性
      formData.append("bucket", 'xcyy-khd'); //'xcyy-khd'
      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      const _this=this;
      this.axios
        .post(fileUploadUrl, formData, config)
        .then(res => {
          console.log(res.data.data)
          const imageUrl = res.data.data;
          this.handlePreview({name:imageUrl,url:imageUrl})
        })
        .catch((e) => {
          _this.$message.error("文件上传失败,请检查网络",e);
        });
    },
     handleRemove(file, fileList) { //删除图片列表中的图片
     console.log(fileList)
      let delIndex;
        this.fileList.forEach((item,index)=>{
         if(file.name==item.name){
           delIndex=index;
         }
        })
        this.fileList.splice(delIndex,1);
        console.log(file, this.fileList);
        this.$emit("changeImage",this.fileList)

      },
      handlePreview(file) { //上传成功后预览
        console.log(file);
        this.fileList.push(file);
        this.$emit("changeImage",this.fileList)
      }
  }
}
</script>
